<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>阿里图标 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/31.7fbc3d2a.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="active sidebar-link">16-阿里图标 组件化 swiper</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html#阿里图标" class="sidebar-link">阿里图标</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html#代码复用-组件化" class="sidebar-link">代码复用(组件化)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html#swiper" class="sidebar-link">swiper</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html#html5的定义" class="sidebar-link">html5的定义</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html#语义化标签" class="sidebar-link">语义化标签:</a></li></ul></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="阿里图标"><a href="#阿里图标" class="header-anchor">#</a> 阿里图标</h2> <ul><li><p>顾名思义就是阿里巴巴开发的图标网站,免费为我们提供大量精美的图标的网站</p></li> <li><p>将图标以字体的形式加载到自己的网站上.</p></li> <li><p>这就是大企业的责任,要为社会提供有价值的东西,所以阿里图标是为中国开发者提供的便利性服务</p></li> <li><p><strong>总结</strong></p></li></ul> <blockquote><p>1.登录阿里巴巴矢量图标库
2,购物(添加到购物车)
3.添加到项目
4.直接下载
5.下载好的文件解压到你的项目中的iconfont文件里面
6.点击.html文件查看演示</p></blockquote> <p><strong>阿里图标的强大之处在于我们挑选图标,我们生成项目,生成在线链接,直接用</strong></p> <h2 id="代码复用-组件化"><a href="#代码复用-组件化" class="header-anchor">#</a> 代码复用(组件化)</h2> <ul><li><p>一行代码可以多次利用,通过添加不同的css类名</p> <p>我们之前如果要去浮动或者清除浮动</p></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.father .son</span><span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrap .content</span><span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrap .content:after</span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;father&quot;</span>&gt;
  &lt;div class=<span class="token string">&quot;son&quot;</span>&gt;&lt;/div&gt;
  &lt;div class=<span class="token string">&quot;son&quot;</span>&gt;&lt;/div&gt;
  &lt;div class=<span class="token string">&quot;son&quot;</span>&gt;&lt;/div&gt;
&lt;/div&gt;	
&lt;div class=<span class="token string">&quot;wrap&quot;</span>&gt;
  &lt;div class=<span class="token string">&quot;content&quot;</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">浮动
	.fl</span><span class="token punctuation">{</span>
		<span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token selector">.fr</span><span class="token punctuation">{</span>
		<span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token comment">/*我们可以写一个浮动的类名,这个类就相当于工具类.
哪个元素需要浮动我就直接在其前面添加这个类名他就拥有了浮动的样式.*/</span>

<span class="token selector">清除浮动
	.clearfix:after</span><span class="token punctuation">{</span>
    	<span class="token property">content</span><span class="token punctuation">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    	<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
    	<span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="language-nginx line-numbers-mode"><pre class="language-nginx"><code>我们单独去写一个css的样式用于不同html的复用 
例如我们创建一个外部CSS文件引入,里面写的是小米的头部区域
 &lt;link rel=&quot;stylesheet&quot; href=&quot;topbar.css&quot;&gt;
你打开小米商城里别的链接,可以发现这个头部经常会用到.
我们不止可以在这个HTML页面使用,我们在写下一个页面的时候也可以把这个拿来使用.
其实无论是模块化开发还是组件化开发,强调的都是代码的复用性.
可以大幅提高工作效率,减少开发时长.你可以把别人的东西拿来使用,只需自己定义较少的部分.
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="swiper"><a href="#swiper" class="header-anchor">#</a> swiper</h2> <p>轮播图:在有限的空间展示多张图片和文字;</p> <ul><li>**我们看文档(操作手册)**是为了什么?</li></ul> <p>理解操作规范,思维设计理念</p> <ul><li><p><strong>学框架,工具库的意义</strong></p></li> <li><p>帮助我们去高效正确的规范开发工具</p></li> <li><p>合理复制粘贴不是坏事,可以提高我们的效率,</p></li></ul> <p>计算机很经典的法则:开源思想 :github</p> <p>swiper本质上也是一个开源项目:</p> <ul><li>学习框架的过程</li></ul> <div class="language-nginx line-numbers-mode"><pre class="language-nginx"><code>1.合理使用它
2.了解它的思想  vue:mvvm react:mvc
3.研究代码,底层实现(最重要)
4.创新  公司魔改框架
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>假如你下载好了框架</li></ul> <p><strong>请在package文件夹找生成好的框架代码</strong></p> <ul><li>.css和.min.css的区别</li></ul> <div class="language-nginx line-numbers-mode"><pre class="language-nginx"><code>.min.css 压缩版  清除了所有不需要的空格和换行
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>引入顺序</li></ul> <div class="language-nginx line-numbers-mode"><pre class="language-nginx"><code>引入框架样式的时候,保证在自己写的样式前面,方便自己的样式覆盖它

引入框架js的时候,需要写在body标签结束之前,保证页面元素加载完成以及被解析
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>CDN引入</p> <p>让页面加载的时候在线下载</p> <p>CDN 资源服务器(缓存)  找最近的服务器去拿资源(重定向)</p> <h2 id="html5的定义"><a href="#html5的定义" class="header-anchor">#</a> html5的定义</h2> <blockquote><p><strong>狭义:HTML发展到了第五代版本,出现了很多新的功能标签,新的语义化标签</strong></p> <p><strong>广义:出现了新的开发体系,直播,玩游戏,各种功能,3d</strong></p></blockquote> <ul><li>HTML5是一个完备的全新的网站开发的解决方案. canvas标签(画布)进行渲染式的开发,</li> <li>脱离了div盒子的浮动,定位等等.</li></ul> <h2 id="语义化标签"><a href="#语义化标签" class="header-anchor">#</a> 语义化标签:</h2> <ul><li>理论上任何标签的效果都可以用div实现,但是我们肯定是想让网站变得更好遵守语义化的特点.</li> <li>所谓语义化就是写出这个标签名字我们就知道这个标签的作用和存在的意义,更有利于seo搜索引擎的优化.</li></ul> <p><strong>语义化标签的优点</strong></p> <ul><li>比div标签有着更加丰富的含义,方便开发和维护.</li> <li>搜索引擎能更方便的识别页面的每个部分,</li> <li>方便其他设备的解析.(如移动设备,盲人设备).</li></ul> <blockquote><p><code>header</code>标签存放网站公共头部分的标签,通常被放置在页面或者页面中某个区块的顶部，包含整个页面或者块级的标题、简介等信息，起到引导与导航的作用。</p> <p>我们不但可以放置页面或者页面中某个区级的标题，还可以放置搜索表单、logo图片等元素</p> <p>标签的位置没有太大限制,不一定非得网站顶部,也可以是一个区域的顶部</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*网站头部实例*/</span>
&lt;header&gt;
		&lt;img src=<span class="token string">&quot;&quot;</span> alt=<span class="token string">&quot;&quot;</span>&gt;
		&lt;h1&gt;小米&lt;/h1&gt;
	&lt;/header&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p><code>nav</code>元素,表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分.</p> <p>nav不但可以作为页面独立的导航区域存在，我们还可以在<code>header</code>标签中使用</p> <p><code>nav</code>标签还可以显示在侧边栏中,由此可见一个页面可以有多个<code>nav</code>元素.我们可以将主要的,基本的链接组放进<code>nav</code>标签内即可.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*nav示例*/</span>
&lt;header&gt;
		&lt;img src=<span class="token string">&quot;&quot;</span> alt=<span class="token string">&quot;&quot;</span>&gt;
		&lt;h1&gt;小米&lt;/h1&gt;
		&lt;nav&gt;
			&lt;a href=<span class="token string">&quot;&quot;</span>&gt;小米手机&lt;/a&gt;
			&lt;a href=<span class="token string">&quot;&quot;</span>&gt;小米家具&lt;/a&gt;
			&lt;a href=<span class="token string">&quot;&quot;</span>&gt;小米家电&lt;/a&gt;
		&lt;/nav&gt;
	&lt;/header&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p><code>aside</code>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。</p> <p>所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div&gt;
		&lt;aside&gt;
			&lt;h2&gt;小米家电的优势&lt;/h2&gt;
			&lt;p&gt;优势是.....&lt;/p&gt;
		&lt;/aside&gt;
	&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p><code>footer</code>一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式,公司介绍等信息。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div&gt;	
	&lt;aside&gt;
			&lt;h2&gt;小米家电的优势&lt;/h2&gt;
			&lt;p&gt;优势是.....&lt;/p&gt;
		&lt;/aside&gt;
	&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p><code>article</code>标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它,一个article元素包括标题,正文和脚注.</p> <p><code>article</code>标签还可以嵌套使用</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;article&gt;
    &lt;h1&gt;HTML5学习之语义化标签&lt;/h1&gt;
    &lt;p&gt;....正文.....&lt;/p&gt;
    &lt;footer&gt;版权所有*伪版必究&lt;/footer&gt;
&lt;/article&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p><code>section</code>是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;section&gt;
    &lt;h1&gt;前端&lt;/h1&gt;
    &lt;p&gt;前端大致包含HTML、CSS和JavaScript三个部分&lt;/p&gt;
    &lt;article&gt;
        &lt;h2&gt;HTML&lt;h2&gt;
        &lt;p&gt;内容&lt;/p&gt;
    &lt;/article&gt;
    &lt;article&gt;
        &lt;h2&gt;CSS&lt;h2&gt;
        &lt;p&gt;样式&lt;/p&gt;
    &lt;/article&gt;
    &lt;article&gt;
        &lt;h2&gt;JavaScript&lt;h2&gt;
        &lt;p&gt;行为&lt;/p&gt;
    &lt;/article&gt;
&lt;/section&gt;
<span class="token comment">/*在这个例子中，&lt;section&gt;标签代表一段内容
在这段内容中，HTML、CSS、Javascript是三个完全独立的部分.
因而我们为这三个不同的部分分别使用&lt;article&gt;标签*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>div section article三者的比较：</p> <ul><li>div应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签</li> <li><code>section</code>：包含的内容是一个明确的主题，通常有标题区域.</li> <li>如果我们的页面中需要一个单独的模块来实现一个单独的功能就用article,其他的时候都用section</li></ul> <p><img src="C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200723153503088.png" alt="image-20200723153503088"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/17-弹性盒模型.html" class="prev">
        15-弹性盒模型
      </a></span> <span class="next"><a href="/./guide/notes/css/19-响应式.html">
        17-响应式
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/31.7fbc3d2a.js" defer></script>
  </body>
</html>
